*{
	margin:0;
	padding:0;
	list-style: none;
}
.wrapper{
	width:400px;
	border:1px solid #ccc;
	margin:100px auto;
	border-radius:5px;
}
.wrapper .search{
	width:100%;
	height:50px;
	line-height:50px;
}
.wrapper .search .search-box{
	margin-left:10px;
	border-radius:5px;
	font-size:16px;
	padding:10px 15px;
	border:1px solid #ccc;
}
.wrapper .search p{
	display: inline-block;
}
.wrapper .search p span{
	color:#38f;
	padding:3px 5px;
	cursor: pointer;
}
.wrapper .search .active{
	background:#38f;
	color:white;
	border-radius: 5px;
}

/*userlist*/
.wrapper .user-list ul{
	padding:10px;
}
.wrapper .user-list li{
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
	padding-top:10px;
}
.wrapper .user-list li img{
	width:50px;
	height:50px;
	vertical-align: middle;
}
.wrapper .user-list li .chat{
	display:inline-block;
	vertical-align: middle;
	padding-left: 10px;
}
.wrapper .user-list li:last-child{
	border:none;
	padding-bottom: 0;
}
